<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxLayout="column">
    <div
        id="overwriteCheckbox"
        class="checkbox"
        *ngIf="storageOptions.updateModeActive"
    >
        <mat-radio-group
            [(ngModel)]="storageOptions.updateMode"
            fxLayout="column"
            color="accent"
            class="pipeline-radio-group"
        >
            <mat-radio-button
                [value]="'update'"
                style="padding-left: 0"
                data-cy="pipeline-update-mode-update"
            >
                Update pipeline <b>{{ currentPipelineName }}</b>
            </mat-radio-button>
            <mat-radio-button
                [value]="'clone'"
                class="mb-10"
                data-cy="pipeline-update-mode-clone"
            >
                Create new pipeline
            </mat-radio-button>
        </mat-radio-group>
    </div>
    <form [formGroup]="submitPipelineForm">
        <div
            fxFlex="100"
            fxLayout="column"
            *ngIf="
                !storageOptions.updateModeActive ||
                storageOptions.updateMode === 'clone'
            "
        >
            <mat-form-field fxFlex color="accent">
                <mat-label>Pipeline Name</mat-label>
                <input
                    [formControlName]="'pipelineName'"
                    data-cy="sp-editor-pipeline-name"
                    matInput
                    name="pipelineName"
                    (blur)="triggerTutorial()"
                />
                <mat-error
                    >Pipeline name must have between 3 and 40 characters.
                </mat-error>
            </mat-form-field>
            <mat-form-field fxFlex color="accent">
                <mat-label>Description</mat-label>
                <input [formControlName]="'pipelineDescription'" matInput />
                <mat-error
                    >Pipeline description must not have more than 80 characters.
                </mat-error>
            </mat-form-field>
        </div>
    </form>
    <mat-checkbox
        [(ngModel)]="storageOptions.startPipelineAfterStorage"
        color="accent"
        data-cy="sp-editor-checkbox-start-immediately"
    >
        Start pipeline immediately
    </mat-checkbox>
    <mat-checkbox
        [(ngModel)]="storageOptions.navigateToPipelineOverview"
        color="accent"
        data-cy="sp-editor-checkbox-navigate-to-overview"
    >
        Navigate to pipeline overview afterwards
    </mat-checkbox>
    <div class="mt-10">
        <mat-expansion-panel class="mat-elevation-z0 border-1">
            <mat-expansion-panel-header
                >Show pipeline configuration as code</mat-expansion-panel-header
            >
            <sp-configuration-code-panel
                *ngIf="compactPipeline"
                [configuration]="compactPipeline"
                maxHeight="none"
            >
            </sp-configuration-code-panel>
        </mat-expansion-panel>
    </div>
</div>
